<template>
  <div class="upload">
    <!-- 用来上传的 -->
    <!-- 
      action： 上传图片的地址（会自动上传到这个地址）
        它默认发的是post请求，并且参数名叫file
        如果以后你要上传，但是发的不是post请求，或者参数名不叫file
        就不能用这种默认的上传方式，就要自定义上传

      list-type="picture-card" 就是设置为照片墙效果
      :on-preview： 当点击预览图标触发的钩子
      :on-remove：  当点击删除图标触发的钩子
      file-list： 保存上传的图片的数组
      :http-request：用来做自定义上传
            只要一加这个钩子就不会用默认上传了，而是你用钩子里写的上传代码
      :on-change： 当文件状态发生改变触发
                  比如说添加、比如说删除

       :before-upload="beforeAvatarUpload" 上传前会调用的钩子
            在这个钩子里可以做一些类型的判断和文件大小的判断
            如果为true才会帮你去做上传，为false不做上传
     -->
    <el-upload
      action="https://jsonplaceholder.typicode.com/posts/"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :http-request="upload"
      :file-list="fileList"
      :on-change="handleChange"
      :class="{ disabled: isDisabled }"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <!-- 进度条 -->
    <el-progress
      style="width:220px"
      v-if="showProg"
      :percentage="percent"
    ></el-progress>
    <el-dialog title="预览图片" :visible.sync="dialogVisible">
      <img width="100%" :src="imageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
// 导入
import COS from 'cos-js-sdk-v5'
// 实例化一个操作腾讯云的对象
let cos = new COS({
  // 访问密钥 id 和 key
  SecretId: 'AKIDzqURIyRggU6WigQxFKCoLhoeEXZLq41i',
  SecretKey: 'VjhU4QYXJrAF5h4D8rMdgU4PVN0PZVCg'
})

export default {
  data () {
    return {
      imageUrl: '', //图片路径
      dialogVisible: false,
      fileList: [], //图片数组
      showProg: false, //进度条的显示与隐藏
      percent: 0 //进度条进度
    }
  },
  methods: {
    //   点击删除触发的钩子
    handleRemove (file, fileList) {
      // 点击删除之后清空数组  上传就可以显示了
      this.fileList = []
    },
    // 点击预览图片触发的钩子
    handlePictureCardPreview (file) {
      // 将图片路径赋值给预览图片的img的src
      this.imageUrl = file.url
      //   显示预览对话框
      this.dialogVisible = true
    },
    // 文件状态改变时触发
    handleChange (file, fileList) {
      // 当开始上传时 就把这个赋值给fileList  就会直接隐藏带+号的那个框框
      this.fileList = fileList
    },
    // 上传接口
    upload (params) {
      // 发请求前显示进度条
      this.showProg = true
      cos.putObject(
        {
          Bucket: 'hmhr72-1306809193' /* 必须 */,
          Region: 'ap-guangzhou' /* 存储桶所在地域，必须字段 */,
          Key: params.file.name /* 必须 */,
          StorageClass: 'STANDARD',
          Body: params.file, // 上传文件对象

          // 上传进度的回调函数
          onProgress: progressData => {
            //   进度条的进度显示
            // 因为这个回调里的数0-1 所以要乘100
            this.percent = progressData.percent * 100
          }
        },
        // 上传完成的回调函数 上传完成和失败都会调用
        (err, data) => {
          if (!err) {
            // console.log(data)
            this.fileList = [{ url: 'http://' + data.Location }]
            // 将进度清0
            this.percent = 0
            // 隐藏进度条
            this.showProg = false
          }
        }
      )
    }
  },
  computed: {
    isDisabled () {
      return this.fileList.length > 0
    }
  }
}
</script>

<style lang="scss" scoped>
.upload {
  .disabled {
    ::v-deep .el-upload--picture-card {
      display: none;
    }
  }
}
</style>
